<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>

		<meta name="viewport" content="initial-scale=1,maximum-scale=1, minimum-scale=1">

		<link rel="stylesheet" type="text/css" href="css/common.css" />
	</head>

	<body>

        <div class="pop-bg">
            <div class="pop-box" id="loading"><img class="loading" src="img/load.gif" alt=""></div>

            <div class="pop-box" id="success">
                <img src="img/success_title.png" width="100%" alt="">
                <div class="pop-lottery-box">
                    <p>恭喜您有机会获得<span>一等奖</span></p>
                    <p>价值5000元大润发购物卡一份</p>
                </div>
                <div class="pop-lottery-tips">小票审核会在3个工作日内，审核您上传小票的真实性，如小票审核未通过，您将会失去中奖资格。敬请关注本活动页面。</div>
                <button>返回首页</button>
            </div>

            <div class="pop-box" id="failed">
                <img class="lose" src="img/lose_icon.png" alt="">
                <div class="pop-lottery-tips center">很遗憾，您未抽中任何奖品</div>
                <button>返回首页</button>
            </div>
        </div>

        <img src="img/logo.jpg" width="100%" alt="" />
        <div class="page lottery">
            <div class="lottery-box">
                <img id="img" src="img/lotter_area_img.png" width="100%" alt="" />
                <img class="start" src="img/lotter_start_img.png" width="100%" alt="" />
            </div>
            <div class="lottery-list-box">
                <div class="lottery-list-item">中奖名单 ID：<span>xxxxxx</span>刚刚抽中了奖品<span>名称五</span></div>
                <div class="lottery-list-item">中奖名单 ID：<span>xxxxxx</span>刚刚抽中了奖品<span>名称五</span></div>
                <div class="lottery-list-item">中奖名单 ID：<span>xxxxxx</span>刚刚抽中了奖品<span>名称五</span></div>
            </div>
        </div>

        <script src="js/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
        <script src="js/jQueryRotate.2.1.js" type="text/javascript" charset="utf-8"></script>

        <script type="text/javascript">
            $('.close-pop').click(function (e) {
                $('.pop-bg').removeClass('flex');
                $('.pop-box').hide();
            });

            var roll= function(){
                $(this).unbind("click",roll);
                var randomNum = Math.ceil(Math.random()*12);
                var angle = 0;
                var num = 0;
                var zhuan=setInterval(function(){
                    angle+=20;
                    num++;
                    $("#img").rotate(angle);
                    if(num >= 36*3+randomNum*3){
                        $("#tip").bind("click",roll );
                        clearInterval(zhuan);
                        $("#img").rotate(25);
                        //rotate里的参数代表停下后指针所指的奖，
                        // 65 155 245 335 谢谢参与
                        // 25 一等奖
                        // 115 二等奖
                        // 205 295 三等奖
                        $('.pop-bg').addClass('flex');
                        $('#loading').show();
                        setTimeout(function(){
                            $('#loading').hide();
                            //$('#failed').show();
                            $('#success').show();
                        },1000);
                    }
                },30);
            }

            $(".start").bind("click",roll);
        </script>
	</body>

</html>